<template>
  <el-drawer
    custom-class="m7-drawer"
    direction="rtl"
    :size="realWidth + 'px'"
    :append-to-body="appendToBody"
    :visible.sync="drawer"
    :destroy-on-close="destroyOnClose"
    :wrapperClosable="wrapperClosable"
    :before-close="closeDraw">
    <div slot="title">
      <slot name="title">
        <span>{{ title }}</span>
      </slot>
    </div>
    <div class="drawer-contain">
      <slot name="column"></slot>
    </div>
    <div class="drawer-move" ref="drawerMove" @mousedown="addResizeEvent" v-if="canResize"></div>
    <div class="more-btn" v-if="isShowMoreBtn">
      <slot name="btn">
        <el-button size="mini" @click="cancelFun">取消</el-button>
        <el-button size="mini" type="primary" @click="save">确定</el-button>
      </slot>
    </div>
  </el-drawer>
</template>
<script lang="ts">
/**
 * 可改变宽度的drawer
 * 使用参数参考elementUI el-drawer
 */
import { Component, Prop, Vue, Ref } from 'vue-property-decorator'
@Component({
  name: 'Drawer'
})
export default class Drawer extends Vue {
  @Ref() private drawerMove // 抽屉可调整大小
  @Prop({ default: () => 400 }) private size!: number // 抽屉的宽度，默认400
  @Prop({ default: () => false }) private drawer!: boolean // 是否显示抽屉的标识，默认关闭
  @Prop({ default: () => '' }) private title!: string // 标题
  @Prop({ default: () => true }) private destroyOnClose!: boolean // 是否在关闭的时候销毁组件，默认销毁
  @Prop({ default: () => false }) private wrapperClosable!: boolean // 点遮罩是否关闭抽屉，默认不能关闭
  @Prop({ default: () => false }) private appendToBody!: boolean | undefined // 是否插入body
  @Prop({ default: () => true }) private canResize!: boolean // 是否可以调整抽屉宽度
  @Prop({ default: () => false }) private isShowMoreBtn!: boolean | undefined // 是否显示更多的操作按钮
  private realWidth: number = 400 // 抽屉的真实宽度
  private closeDraw () { // 抽屉关闭时的回调
    this.$emit('closeDraw')
  }

  // 抽屉宽度可调整
  private addResizeEvent (e) {
    const el = this.drawerMove
    const domWidth = document.documentElement.clientWidth
    e.stopPropagation()
    document.onmousemove = (ev) => {
      ev.preventDefault()
      this.realWidth = domWidth - ev.pageX
      if (this.realWidth < this.size) {
        this.realWidth = this.size
      }
      if (this.realWidth > domWidth) {
        this.realWidth = domWidth
      }
    }
    document.onmouseup = () => {
      document.onmousemove = document.onmouseup = null
    }
  }

  private mounted () {
    this.realWidth = this.size
  }

  private save () {
    this.$emit('save')
  }

  private cancelFun () {
    this.$emit('cancelFun')
  }

  private deactivated () { // 组件退出弹层关闭
    this.$emit('cancelFun')
  }
}
</script>
<style lang="stylus" scoped>
.m7-drawer
  position relative
  .drawer-contain
    height calc(100vh - 80px)
    overflow auto
    padding 24px
  .drawer-move
    position: absolute
    left: 0px
    width: 5px
    top 0px
    height: 100%
    cursor: col-resize
    transition: .3s ease
    z-index: 21
    &:hover
      background: $c-main
  .more-btn
    width 100%
    position absolute
    bottom 0px
    height 56px
    line-height 56px
    background #fff
    z-index 20
    text-align right
    padding-right 20px
</style>
